---
title: Loader
description: Loader provides a visual cue to the user that the system is processing, awaiting a result or working to fulfill a request.
themeSource: packages/ui/src/theme/tokens/components/loader.ts
reactSource: packages/react/src/primitives/Loader/Loader.tsx
mdnUrl: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg
htmlElement: svg
supportedFrameworks: react
---

import { Fragment } from '@/components/Fragment';
import { PageTabLayout } from '@/components/Layout/PageTabLayout';
import { getCustomStaticPath } from '@/utils/getCustomStaticPath';
import { PropsTableTab } from '@/components/propsTable/PropsTableTab';
import data from '@/data/props-table.json';

export async function getStaticPaths() {
  return getCustomStaticPath(frontmatter.supportedFrameworks);
}

{/*  `getStaticProps` is required to prevent "Error: getStaticPaths was added without a getStaticProps. Without getStaticProps, getStaticPaths does nothing" */}

export async function getStaticProps() {
  return { props: {} }
}

<PageTabLayout 
  tabComponents={[{
    title: "Documentation", 
    children: <Fragment>{({ platform }) => import(`./${platform}.mdx`)}</Fragment>
  },
  {
    title: "Props", 
    children: <PropsTableTab 
                componentName={frontmatter.title} 
                PropsData={data} 
                htmlElement={frontmatter.htmlElement} 
                mdnUrl={frontmatter.mdnUrl}
              />
  }]}
/>